<template>
	<view class="address-mod">
		<view class="address-pad" v-if="personData.length !==0">
			<view class="address-item flex" v-for="item,index in personData" :key="'item'+index" @click="addressClick(index)">
				<view class="once">
					<view class="fw">{{item.address}} {{item.houseNumber}}</view>
					<text class="fz">{{item.name}} {{item.phone}}</text>
				</view>
				<view class="flex address-item-compile center">
					编辑
				</view>
			</view>
		</view>
			<view class="center address-add color" @click="addAddressClick">
				+ 新增地址
			</view>
	</view>
</template>

<script>
	export default {
		name: 'indentAdress',
		onLoad(obj) {
				this.id= Number(obj.id)
			if (!obj) {
				uni.setNavigationBarTitle({
					title: obj.title
				})
			}else {
				uni.setNavigationBarTitle({
					title: '地址管理'
				})
			}
		},
		data(){
			return{
				id:0
			}
		},
		computed: {
			personData() {
				return JSON.parse(localStorage.getItem('address'));
			},
		},
		methods:{
			addAddressClick(){
				uni.navigateTo({
					url: '/pages/indent/children/indentAddAddress?title=新增地址&id='+this.id
				})
			},
			addressClick(index) {
				uni.navigateTo({
					url: '/pages/indent/indent?index='+ index + '&id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.address-mod {
		height: 100vh;
		border-top: 1px solid #ebeef3;
		background-color: #e0e3e7;
		.address-pad {
		padding: 15rpx 15rpx 0;
		background-color: #fff;			
			.address-item {
				border-bottom: 1px solid #ebeef3;
				padding-bottom: 25rpx;				
				.once {
					border-right: 1px solid #E4E7ED;
					.fw {
						font-size: 28rpx;
					}
				}
				.address-item-compile {
					width: 100rpx;
					font-size: 28rpx;
				}
			}
		}
		.address-add {
			margin: 35rpx 15rpx;
			background-color: #fff;
			padding: 15rpx 0;
			border-radius: 15px;
			border: 1px solid #59b195;
		}
	}
</style>
